<template>
    <view>
        <lrlGradientUNavbar
            title="lrl-gradient-u-navbar"
            :autoBack="true"
            border
            placeholder
			:scrollTop="scrollTop"
			:scrollGradualMode="scrollGradualMode"
			:scrollGradualTop="scrollGradualTop"
			:scrollGradualScrollRange="scrollGradualScrollRange"
			:scrollGradualStep="scrollGradualStep"
			:gradualColorForm="gradualColorForm"
			:gradualColorNext="gradualColorNext"
        >
        </lrlGradientUNavbar>
		{{ isRefresher }}
		<swiper @transition="transition" id="swiper">
			
			<swiper-item>
				<scroll-view :scroll-y="true" style="height: 200rpx;" >
					
					<u-cell
						    size="large"
						    title="单元格"
						    value="内容"
						    isLink
							v-for="(item,index) in 30"
						></u-cell>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view 
					:scroll-y="true" style="height: 200rpx;" 
					:refresher-enabled="isRefresher"
					:refresher-triggered="triggered"
					@refresherrefresh="refresherrefresh"
				>
					
					<u-cell
						    size="large"
						    title="单元格"
						    value="内容"
						    isLink
							v-for="(item,index) in 30"
						></u-cell>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view :scroll-y="true" style="height: 200rpx;" >
					
					<u-cell
						    size="large"
						    title="单元格"
						    value="内容"
						    isLink
							v-for="(item,index) in 30"
						></u-cell>
				</scroll-view>
			</swiper-item>
		</swiper>
        <view class="container">
            <u--text size="28rpx" type="primary"
                text="更多配置项查看u-view的u-navbar组件"></u--text>

            <view class="form-item">
                <text class="form-item--title">渐变模式(scrollGradualMode)</text>
                <view class="form-item--content">
                    <u-radio-group
                        v-model="scrollGradualMode"
                        placement="column"
                      >
                        <u-radio
						  labelSize="24rpx"
                          :customStyle="{marginBottom: '8px'}"
                          v-for="(item, index) in scrollGradualModeList"
                          :key="index"
                          :label="item.name + '，' + item.label"
                          :name="item.name"
                        >
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>
			<view class="form-item">
                <text class="form-item--title">渐变top(scrollGradualTop)</text>
				<u--text size="24rpx" type="info" wordWrap="break-word" lines="4"
				    text="调整大小可以控制从那个位置滚动变换"></u--text>
                <view class="form-item--content">
                    <u-number-box v-model="scrollGradualTop" :min="0" inputWidth="200rpx"></u-number-box>
                </view>
            </view>
			<view class="form-item">
                <text class="form-item--title">颜色渐变滚动值范围(scrollGradualScrollRange)</text>
				<u--text size="24rpx" type="info" wordWrap="break-word" lines="4"
				    text="默认100，通过调整大小可以调整滚动变换步长"></u--text>
                <view class="form-item--content">
                    <u-number-box v-model="scrollGradualScrollRange" :min="0" inputWidth="200rpx"></u-number-box>
                </view>
            </view>
			<view class="form-item">
                <text class="form-item--title">颜色渐变模式(scrollGradualMode = color)下颜色过渡梯长(scrollGradualStep)</text>
				<u--text size="24rpx" type="info" wordWrap="break-word" lines="4"
				    text="默认20，通过调整大小可以细化颜色变换过程,尽量不要设置过大,数值越大,滚动页面时变化的次数越多,可能会影响性能"></u--text>
                <view class="form-item--content">
                    <u-number-box v-model="scrollGradualStep" :min="0" inputWidth="200rpx"></u-number-box>
                </view>
            </view>
			<view class="form-item">
                <text class="form-item--title">渐变模式下变换前的颜色</text>
				<u--text size="24rpx" type="info" wordWrap="break-word" lines="4"
				    text="颜色支持hex和rgb两种格式，目前不支持rgba和颜色代码单词"></u--text>
				
                <view class="form-item--content">
					<view class="item-cell">
						<text class="item-cell-text">标题颜色<br />(gradualColorForm.titleColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorForm.titleColor }"
							@click="openPickerColor('gradualColorForm', 'titleColor')"
						>///</button>
					</view>
					<view class="item-cell">
						<text class="item-cell-text">背景颜色<br />(gradualColorForm.bgColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorForm.bgColor }"
							@click="openPickerColor('gradualColorForm', 'bgColor')"
						>///</button>
					</view>
					<view class="item-cell">
						<text class="item-cell-text">返回icon颜色<br />(gradualColorForm.leftIconColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorForm.leftIconColor }"
							@click="openPickerColor('gradualColorForm', 'leftIconColor')"
						>///</button>
					</view>
                </view>
            </view>
			<view class="form-item">
                <text class="form-item--title">渐变模式下变换后的颜色</text>
				<u--text size="24rpx" type="info" wordWrap="break-word" lines="4"
				    text="颜色支持hex和rgb两种格式，目前不支持rgba和颜色代码单词"></u--text>
				
                <view class="form-item--content">
					<view class="item-cell">
						<text class="item-cell-text">标题颜色<br />(gradualColorNext.titleColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorNext.titleColor }"
							@click="openPickerColor('gradualColorNext', 'titleColor')"
						>///</button>
					</view>
					<view class="item-cell">
						<text class="item-cell-text">背景颜色<br />(gradualColorNext.bgColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorNext.bgColor }"
							@click="openPickerColor('gradualColorNext', 'bgColor')"
						>///</button>
					</view>
					<view class="item-cell">
						<text class="item-cell-text">返回icon颜色<br />(gradualColorNext.leftIconColor)：</text>
						<button 
							class="color-btn" 
							:style="{ backgroundColor: gradualColorNext.leftIconColor }"
							@click="openPickerColor('gradualColorNext', 'leftIconColor')"
						>///</button>
					</view>
                </view>
            </view>


			<u-gap height="30px"></u-gap>

			<view class="album" v-for="(item,index) in 30">
				<view class="album__avatar">
					<image
							src="/static/lrl/jianpan.png"
							mode=""
							style="width: 32px;height: 32px;"
					></image>
				</view>
				<view class="album__content">
					<u--text
							text="uView UI"
							type="primary"
							bold
							size="17"
					></u--text>
					<u--text
							margin="0 0 8px 0"
							text="全面的组件和便捷的工具会让您信手拈来，如鱼得水"
					></u--text>
					<u-album :urls="urls1" keyName="src2"></u-album>
				</view>
			</view>
	
			
        </view>
		
		<uv-pick-color ref="pickerColor" @confirm="pickerColorConfirm"></uv-pick-color>

    </view>
</template>
 
<script>
    // easycom 模式导入的组件有些时候不弹组件属性代码提示，单独导入
    import lrlGradientUNavbar from '@/components/lrl/components/lrl-gradient-u-navbar/lrl-gradient-u-navbar.vue';
    /**
     * lrlGradientUNavbar 渐变导航
     * @author liruilin
     */
    export default {
        components: {
            lrlGradientUNavbar 
        },
        data() {
            return {
				scrollTop: 0,
				scrollGradualMode: 'color',
				scrollGradualTop: 0,
				scrollGradualScrollRange: 300,
				scrollGradualStep: 20,
				gradualColorForm: {
					bgColor: '#FFFFFF',
					titleColor: '#333333',
					leftIconColor: '#333333'
				},
				gradualColorNext: {
					bgColor: '#ff6334',
					titleColor: '#1aec17',
					leftIconColor: '#1c0df4'
				},
				
				
				albumWidth: 0,
				urls1: [{
					src2: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7c946930-bcf2-11ea-b997-9918a5dda011.png',
					// src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}],
				
				scrollGradualModeList: [
					{ name: 'none', label: '不开启导航栏渐变'},
					{ name: 'color', label: '颜色渐变，变换过程中不会出现透明'},
					{ name: 'transparent', label: '颜色变换透明过渡模式，变换过程中会出现透明'}
				],
				
				triggered: false,
				swiperRectWidth: 0,
				isRefresher: true
            }
        },
		onPageScroll({ scrollTop }) {
			this.scrollTop = scrollTop
		},
		onReady() {
			this.$u.getRect('#swiper').then(res => {
				this.swiperRectWidth = res.width
			})
		},
        methods: {
			openPickerColor(proto, key){
				this.protoKey = proto
				this.colorKey = key
				this.$refs.pickerColor.open();
			},
			pickerColorConfirm({ hex }){
				this[this.protoKey][this.colorKey] = hex
			},
			transition(e){
				this.isRefresher = !(e.detail.dx % this.swiperRectWidth) 
			},
			refresherrefresh(){
				this.triggered = true
				setTimeout(_ => {
					this.triggered = false
				}, 2000)
			}
        }
    }
</script>

<style lang="scss">
    /* #ifndef APP-NVUE */
    page{
        background-color: #fff;
    }
    /* #endif */
    
    .container{
        padding: 20rpx;
    }
    .form-item{
        margin-top: 30rpx;
        &--title{
            font-size: 26rpx;
            font-weight: 600;
            color: #333;
        }
        &--content{
            margin-top: 20rpx;
            // flex-direction: row;
        }
        
    }
    .input{
		display: block;
        border: 1px solid #f5f5f5;
        flex: 1;
        border-radius: 10rpx;
        height: 80rpx;
        line-height: 80rpx;
        padding: 0 10rpx;
        font-size: 30rpx;
        color: #333;
    }
    .code-show{
        flex: 1;
        background-color: #282c35;
        white-space: pre;
        padding: 20rpx;
        margin-top: 25rpx;
    }
    .code-show-text{
        color: #fff;
        font-size: 18rpx;
    }
    .flex-row{
        flex-direction: row;
    }
	
	.item-cell{
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.item-cell-text{
		font-size: 24rpx;
	}
	
	.color-btn{
		// flex: 1;
		width: 200rpx;
		margin: 0 20rpx;
		padding: 20rpx;
		line-height: 30rpx;
	}
	
	.album {
		@include flex;
		align-items: flex-start;
		margin-bottom: 20rpx;

		&__avatar {
			 background-color: $u-bg-color;
			 padding: 5px;
			 border-radius: 3px;
		 }

		&__content {
			 margin-left: 10px;
			 flex: 1;
		 }
	}
</style>
